echarts 柱状图和饼状图动态获取后台数据

2024-06-05 13:57| 来源: 网络整理| 查看: 265

运用echarts来实现图表

1.首先下载echarts包 http://echarts.baidu.com/echarts2/doc/example.html，在这里我下载的是

2.将echarts包放到项目中，这是我在项目中的路径

3.柱状图的动态获取

首先 1）需要引入：

1 2 3

2）html，为柱状图设置容器

1 2 3

3）js

// 路径配置 require.config({ paths: { echarts: 'echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('test')); option = { title : { text: '农户地块面积统计' }, tooltip : { trigger: 'axis' }, legend: { data:['承保人'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type: 'category', data : (function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "gpadd.do?getNum", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i

【本文地址】

公司简介

联系我们